<!--
 * @Descripttion: dayTwo
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-20 17:18:52
 * @LastEditors: daipeng
 * @LastEditTime: 2020-10-28 18:16:56
-->
<template>
    <div>
        <div id="mychart2" style="height: 320px;width:100%; "></div>
    </div>
</template>

<script>
var common = require('../../../../static/tool.js');
import { mainfun } from "../../../../../assets/js/main.js";
export default {
    props: {},
    data() {
        return {
            url: common.url,
            str2: [],//数据值
        };
    },
    props: ["dayTwo"],
    watch: {
        dayTwo(newName, oldName) {
            this.dayTwo = newName;
            this.getdata();
        },
    },
    created() {
        //数据请求
        this.getdata();
    },
    methods: {
        getdata(){
            // 先重置数据
            this.str2 = [];
            let fn = new FormData();
            fn.append('day', this.dayTwo); //近n天的数据
            this.$http.post(this.url + '/index/expressListShopTime', fn).then((res) => {
                if (res.data.msg == '查询成功！' || res.data.code == '200') {
                    var echars_date = res.data.data;
                    var zb = 0,zhongb = 0,yb = 0,wb = 0;
                    echars_date.forEach(element => {
                        //求和项
                        // 早班
                        console.log(element.ratio_noon);
                        console.log(Number(element.ratio_noon));
                        zb+=Number(element.ratio_morning);
                        zhongb+=Number(element.ratio_noon);
                        wb+=Number(element.ratio_evening);
                        yb+=Number(element.ratio_night);
                    });
                    // console.log("==="+wb);
                    // console.log("==="+zhongb);
                    let paging = [
                        { value: mainfun.filterNumber(wb), name: "晚班" },
                        { value: mainfun.filterNumber(yb), name: "夜班" },
                        { value: mainfun.filterNumber(zb), name: "早班" },
                        { value: mainfun.filterNumber(zhongb), name: "中班" },
                    ];
                    this.str2 = paging;
                    this.init(); //初始化
                    console.log(paging);
                } else {
                    this.$message.error(res.data.msg);
                    return;
                }
            }, (res) => {
                this.$message.error('网络错误！');
                return;
            })
        },
        init() {
            let mychart2 = this.$echarts.init(
                document.getElementById("mychart2")
            );

            var that = this;

            mychart2.setOption({
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{d}%",
                },
                legend: {
                    orient: "vertical",
                    left: 10,
                    data: ["晚班", "夜班", "早班", "中班"],
                },
                //设置饼状图每个颜色块的颜色
                color : [ '#5ecc9b', '#eeba5f', '#70c4de', '#635cd6'],
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                // formatter: '{c}',
                                formatter: function (params) {
                                    //格式化函数
                                    // console.log(params);
                                    return params.percent+"%";
                                },
                                position: "inside",
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "30",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: that.str2,
                    },
                ],
            });
        },
    },
};
</script>

<style scoped>
</style>



// WEBPACK FOOTER //
// src/components/components/echarts/Two.vue